<template>
  <view class="page">
    <!-- 头部 -->
    <view class="header ex-mall-header" @touchmove.stop.prevent>
      <!-- #ifdef MP-WEIXIN -->
      <view class="ex-mall-header-mp-weixin-fill" :class="[$themeClass('header-title-color')]">【 🚚 登录】</view>
      <!-- #endif -->
    </view>

    <view class="content" :class="[$themeClass('goods-content-bg-color')]">
      <view class="orderForm">
        <view class="receiver">
          <view class="title" :class="[$themeClass('goods-title-color')]">登录信息</view>
          <view class="item">
            <u-input class="input" v-model="loginForm.account" placeholder="账号"></u-input>
          </view>
          <view class="item">
            <u-input class="input" type="password" v-model="loginForm.password" placeholder="密码"></u-input>
          </view>
        </view>
      </view>
    </view>

    <view class="footer" ref="refFooter" id="login_footer">
      <view class="btns">
        <view class="btn buy" @click="login" :class="[$themeClass('search-btn-bg-color'), $themeClass('search-btn-color')]">
          <view class="label">立即登录</view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import util from "../../common/js/util";
import UInput from "../../libs/uview-ui/components/u-input/u-input";
import URadio from "../../libs/uview-ui/components/u-radio/u-radio";
import ULineProgress from "../../libs/uview-ui/components/u-line-progress/u-line-progress";
import UModal from "../../libs/uview-ui/components/u-modal/u-modal";
import UIcon from "../../libs/uview-ui/components/u-icon/u-icon";
import UTag from "../../libs/uview-ui/components/u-tag/u-tag";
import UImage from "../../libs/uview-ui/components/u-image/u-image";
import USubsection from "../../libs/uview-ui/components/u-subsection/u-subsection";
import UButton from "../../libs/uview-ui/components/u-button/u-button";
import {info, loginByPassword} from "../../api/common";
import website from '@/utils/website.js'


export default {
  components: {UButton, USubsection, UImage, UTag, UIcon, UModal, ULineProgress, URadio, UInput},
  data() {
    return {
      loginForm: {
        account: '',
        password: ''
      }
    }
  },
  onLoad(options) {
  },
  onReady() {
    if (navigator.userAgent.indexOf('Mobile') === -1) {
      this.pcWidthMatch()
    } else {
      document.getElementById('login_footer').style.right = 0
      document.getElementById('login_footer').style.left = 0
    }
  },
  methods: {
    login() {
      loginByPassword({
        grantType: "password",
        type: "account",
        account: this.loginForm.account,
        password: this.loginForm.password
      }).then(res => {
        uni.setStorageSync('access_token', res.data.accessToken)
        uni.setStorageSync('authority', res.data.authority)
        info().then((res) => {
          const userInfo = res.data
          if (userInfo.avatar === "") {
            userInfo.avatar = website.defaultAvatar
          }
          uni.setStorageSync('userInfo', userInfo)
        }).catch((err) => {
          console.log(err)
        })
        uni.showToast({
          title: '登录成功!',
          icon: 'none'
        })
        setTimeout(() => {
          uni.hideToast()
          this.$switchTab('index')
          // uni.reLaunch({
          //   url: '/pages/tab/tab?tab=index'
          // })
        }, 1000)
      }).catch((e) => {
        console.log(e)
      })
    },
    pcWidthMatch() {
      document.querySelector('body').setAttribute('style', 'width: 420px;margin: 0px auto;position: relative;')

      document.getElementById('login_footer').style.width = '364px'

      document.getElementById('goods_pictures').style.width = '420px'
      document.getElementById('goods_pictures').style.height = '420px'
    },
    validateOrderForm() {
      const reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
      if (!this.orderForm.name || this.orderForm.name === '') {
        uni.showToast({
          icon: 'none',
          title: '请填写联系姓名!'
        })
        return false
      } else if (!this.orderForm.phone || this.orderForm.phone === '') {
        uni.showToast({
          icon: 'none',
          title: '请填写联系人手机号!'
        })
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style lang="scss">
input {
  margin-left: 10px;
}
.page {
  &>.header {
    .header-background {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -1;
    }
  }

  &>.pictures {
    position: sticky;
    top: 0;
    z-index: 0;
    /* #ifndef MP-WEIXIN */
    margin-top: calc(-70px - var(--status-bar-height));
    /* #endif */
    /* #ifdef MP-WEIXIN */
    margin-top: calc(-70px - var(--status-bar-height) - 50px);
    /* #endif */
    width: 100vw;
    height: 100vw;

    &>.swiper {
      width: 100%;
      height: 100%;

      .swiper-item {
        &:nth-child(3n-2) {
          .picture {
            &>.img {
              background-color: #5A9494;
            }
          }
        }

        &:nth-child(3n-1) {
          .picture {
            &>.img {
              background-color: #9B927D;
            }
          }
        }

        &:nth-child(3n) {
          .picture {
            &>.img {
              background-color: #96824C;
            }
          }
        }
      }

      .picture {
        width: 100%;
        height: 100%;

        &>.img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
    }

    &>.btns {
      position: absolute;
      /* #ifndef MP-WEIXIN */
      top: calc(70px + var(--status-bar-height));
      /* #endif */
      /* #ifdef MP-WEIXIN */
      top: calc(70px + var(--status-bar-height) + 50px);
      /* #endif */
      right: 28px;
      display: flex;
      flex-direction: column;

      &>.btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 38px;
        height: 38px;
        margin-bottom: 16px;
        border-radius: 12px;
        overflow: hidden;

        &>.icon {
          font-size: 18px;
        }
      }
    }
  }

  &>.content {
    position: relative;
    z-index: 1;
    //margin-top: -5px;
    padding: 0 28px calc(54px + 18px + 18px + (env(safe-area-inset-bottom) / 2)) 28px;
    //border-radius: 10px 10px 0 0;

    &>.title {
      padding-top: 34px;
      font-size: 23px;
      font-weight: 600;
    }

    &>.orderForm {
      &>.contact {
        & > .title {
          margin-top: 15px;
          font-size: 14px;
          font-weight: 600;
        }

        & > .item {
          margin-top: 15px;
          border-radius: 5px;
          border: 1px solid lightgrey;

          & > .input {
            //margin-left: 10px;
          }
        }
      }

      &>.transport {
        & > .title {
          margin-top: 15px;
          font-size: 14px;
          font-weight: 600;
        }

        & > .item {
          margin-top: 15px;

          & > .radio {
          }
        }
      }

      &>.receiver {
        & > .title {
          margin-top: 15px;
          font-size: 14px;
          font-weight: 600;
        }

        & > .item {
          margin-top: 15px;
          border-radius: 5px;
          border: 1px solid lightgrey;

          & > .input {
          }
        }
      }

    }
  }

  &>.footer {
    position: fixed;
    bottom: 0;
    z-index: 2;
    padding: 18px 28px calc(18px + (env(safe-area-inset-bottom) / 2)) 28px;
    background-color: #FFFFFF;
    border-radius: 34px 34px 0 0;
    overflow: hidden;
    width: 100%;

    &>.btns {
      display: flex;

      &>.btn {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 54px;
        font-size: 13px;
        font-weight: 600;
        border-radius: 12px;

        &.buy {
          flex: 1;
        }
      }
    }
  }

  .cart-ball {
    position: fixed;
    z-index: 300;
    display: none;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    transition: all 0.5s;
    box-shadow: 0 4px 8px #4D4D4D;

    &.show {
      display: block;
    }
  }
}
</style>

<style lang="scss" scoped>
.details_content {
  ::v-deep {
    img {
      max-width: 100%;
      display: flex; // 去除图片间隙
    }
    iframe {
      max-width: 100%;
    }
    video {
      max-width: 100%;
    }
  }
}
</style>
